Google Charts API ব্যবহার করে আপনি চার্টের Styling এবং Layout Management কাস্টমাইজ করতে পারেন। এটি আপনাকে চার্টের দৃশ্যমানতা এবং ব্যবহারের অভিজ্ঞতা উন্নত করতে সহায়তা করে। Styling দ্বারা চার্টের উপাদানগুলোর রঙ, ফন্ট, আকার, লেআউট ইত্যাদি নিয়ন্ত্রণ করা হয়, এবং Layout Management দ্বারা চার্টের সঠিক পজিশন, অক্ষ (axis), এবং স্পেসিং কাস্টমাইজ করা হয়।

Chart Styling এবং Layout Customization

1. Title Styling (চার্ট টাইটেলের স্টাইলিং)

চার্টের টাইটেলকে কাস্টমাইজ করার জন্য আপনি titleTextStyle ব্যবহার করতে পারেন, যা টাইটেলের ফন্ট, আকার, রঙ ইত্যাদি নিয়ন্ত্রণ করতে সাহায্য করে।

chartOptions = {
  title: 'Sales Data',
  titleTextStyle: {
    color: 'blue', // Title text color
    fontSize: 20, // Title text font size
    bold: true, // Title text weight
    italic: true // Title text style
  }
};

এটি টাইটেলকে স্টাইল করতে সাহায্য করবে, যেমন রঙ, আকার এবং ফন্ট স্টাইল।

2. Chart Size (চার্টের আকার)

চার্টের সাইজ কাস্টমাইজ করতে width এবং height অপশন ব্যবহার করা হয়:

chartOptions = {
  width: 800, // Chart width
  height: 500, // Chart height
};

এটি আপনার চার্টের আকার নির্ধারণ করবে। আপনি responsive হতে চাইলে CSS ব্যবহার করতে পারেন।

3. Legend Styling (লেজেন্ড স্টাইলিং)

চার্টের লেজেন্ডের পজিশন, টেক্সট স্টাইল এবং এলাইনমেন্ট কাস্টমাইজ করা যেতে পারে:

chartOptions = {
  legend: {
    position: 'bottom', // Legend position: top, bottom, left, right
    alignment: 'center', // Legend text alignment
    textStyle: {
      color: 'green', // Legend text color
      fontSize: 14, // Legend text size
      fontName: 'Arial' // Legend font type
    }
  }
};

এটি লেজেন্ডের অবস্থান, টেক্সটের আকার, রঙ এবং স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।

4. Tooltip Customization (টুলটিপ কাস্টমাইজেশন)

Tooltip ব্যবহারকারীর চার্টের উপর হোভার করার সময় প্রদর্শিত হয় এবং আপনি এটি কাস্টমাইজ করতে পারেন:

chartOptions = {
  tooltip: {
    trigger: 'focus', // Tooltip appears on focus
    isHtml: true, // Enable HTML content in the tooltip
    textStyle: {
      color: 'black', // Tooltip text color
      fontSize: 12 // Tooltip text font size
    }
  }
};

এটি টুলটিপের স্টাইল এবং প্রেজেন্টেশন কাস্টমাইজ করতে ব্যবহৃত হয়।

5. Axis Styling (অক্ষ স্টাইলিং)

Axis (অক্ষ) গুলি চার্টের স্কেল প্রদর্শন করে। আপনি hAxis (horizontal axis) এবং vAxis (vertical axis) এর টাইটেল, লেবেল, গ্রিডলাইন এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।

chartOptions = {
  hAxis: {
    title: 'Months', // Horizontal axis title
    titleTextStyle: {
      color: 'blue', // Axis title color
      fontSize: 14, // Axis title font size
      bold: true // Axis title bold
    },
    textStyle: {
      color: 'red', // Axis text color
      fontSize: 12 // Axis text font size
    },
    gridlines: {
      color: '#e5e5e5', // Gridlines color
      count: 5 // Number of gridlines
    }
  },
  vAxis: {
    title: 'Sales', // Vertical axis title
    textStyle: {
      color: 'green', // Axis text color
      fontSize: 12 // Axis text font size
    }
  }
};

এটি অক্ষের টাইটেল, টেক্সট এবং গ্রিডলাইন কাস্টমাইজ করতে ব্যবহৃত হয়।

6. Colors Customization (রঙ কাস্টমাইজেশন)

চার্টের বিভিন্ন উপাদানের রঙ কাস্টমাইজ করতে colors অপশন ব্যবহার করা হয়:

chartOptions = {
  colors: ['#4285F4', '#EA4335', '#FBBC05', '#34A853'] // Custom color set for the chart
};

এটি আপনাকে আপনার চার্টের বার, লাইন, বা অন্যান্য অংশের জন্য কাস্টম রঙ সেট করতে সহায়তা করে।

7. Gridlines Customization (গ্রিডলাইন কাস্টমাইজেশন)

Gridlines চার্টের অক্ষের স্কেলকে সহায়ক হিসেবে প্রদর্শন করে। আপনি গ্রিডলাইনগুলোর রঙ, প্রস্থ এবং সংখ্যা কাস্টমাইজ করতে পারেন:

chartOptions = {
  hAxis: {
    gridlines: {
      color: '#e5e5e5', // Gridline color
      count: 5 // Number of gridlines
    }
  },
  vAxis: {
    gridlines: {
      color: '#e5e5e5', // Gridline color
      count: 6 // Number of gridlines
    }
  }
};

এটি গ্রিডলাইন কাস্টমাইজ করতে ব্যবহৃত হয়।

Chart Layout Management

Layout Management দিয়ে আপনি চার্টের উপাদানগুলি পজিশন এবং বিন্যাস করতে পারেন। এর মধ্যে চার্টের টাইটেল, লেজেন্ড, আকার এবং বিভিন্ন স্টাইলিং সংক্রান্ত অপশনগুলো অন্তর্ভুক্ত।

8. 3D Chart Styling (3D চার্ট স্টাইলিং)

অনেক চার্টে আপনি 3D ভিউ অ্যাক্টিভেট করতে পারেন। এটি সাধারণত PieChart, ColumnChart, BarChart ইত্যাদিতে ব্যবহৃত হয়।

chartOptions = {
  is3D: true, // Enable 3D effect for the chart
};

এটি আপনার চার্টের ভিউকে 3D করে তুলবে।

9. Background Color (ব্যাকগ্রাউন্ড রঙ)

চার্টের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করতে backgroundColor অপশন ব্যবহার করা হয়:

chartOptions = {
  backgroundColor: '#f2f2f2' // Set chart background color
};

এটি আপনার চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে সহায়তা করে।

10. Chart Positioning (চার্ট পজিশনিং)

চার্টের অবস্থান নির্ধারণ করতে CSS ব্যবহার করতে পারেন। Angular অ্যাপে google-chart কম্পোনেন্টের মাধ্যমে এটি কাস্টমাইজ করা যায়:

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions" 
  style="display: block; margin: 0 auto;">
</google-chart>

এটি চার্টকে center বা অন্য কোনো অবস্থানে পজিশন করতে সাহায্য করবে।

চার্টের কাস্টমাইজেশন উদাহরণ

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Custom Google Chart';

  chartType = 'PieChart'; // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Chart Data

  chartOptions = {
    title: 'My Daily Activities', // Title
    titleTextStyle: {
      color: 'green',
      fontSize: 20,
      bold: true
    },
    pieHole: 0.4, // Doughnut Style
    width: 600,
    height: 400,
    colors: ['#FF5733', '#33FF57', '#3357FF'], // Custom Colors
    legend: {
      position: 'top',
      alignment: 'center',
      textStyle: {
        color: 'black', // Legend text color
        fontSize: 14 // Legend font size
      }
    },
    tooltip: {
      trigger: 'focus', // Tooltip trigger
      isHtml: true, // Enable HTML in tooltip
      textStyle: {
        color: 'black',
        fontSize: 14
      }
    }
  };
}

HTML:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

সারাংশ

Chart Styling এবং Layout Management ব্যবহার করে আপনি Google Charts-এ

চার্টের কাস্টমাইজেশন করতে পারেন। বিভিন্ন উপাদান যেমন title, legend, axis, tooltip, colors, gridlines, এবং 3D effect কাস্টমাইজ করতে এসব অপশন ব্যবহৃত হয়। এভাবে আপনি চার্টের দর্শনীয়তা এবং ব্যবহারযোগ্যতা বাড়াতে পারেন।